<template>
  <div class="sksj-layout">
    <div class="title">
      <div class="back" @click="onBack">
        <img src="./img/back.png" alt="" />
      </div>
      <div class="title-content">
        <img style="margin-left: 15vw;" src="./img/logo.png" alt="" />
        <span>走访人员轨迹查询</span>
        <em></em>
        <i
          class="font"
        >{{ date }} <i>{{ time }}</i></i
        >
      </div>
    </div>
    <!-- <div style="height:0;"> -->
    <img src="./img/title-line.png" alt="" />
    <!-- </div> -->
    <div class="content">
      <div class="left" :style="{ width: zhedieWidth, minWidth: zhedieMinWidth }">
        <div v-show="zhedieShow" class="left-content">
          <div class="title">
            <div class="title-name">走访人员</div>
            <div class="control">
              <!-- <img src="./img/right-angle.png" /> -->
              <img src="./img/zhedie.png" @click="_closeZhedie" />
            </div>
          </div>
          <SearchTree
            ref="searchTree"
            :data="treeData"
            :defaultdKeys="departmentId"
            @selected="onSelected"
            @checked="onChecked"
            style="padding:0 10px; overflow: hidden;"
          />
          <a-config-provider>
            <template #renderEmpty>
              <div style="text-align: center;padding: 100px 0;">
                <img src="./img/no-data.png" style="width: 60px;margin-bottom: 22px;" />
                <p style="color: #fff;">暂无数据</p>
              </div>
            </template>
          </a-config-provider>
        </div>
        <div class="open-left" v-show="openShow">
          <img src="./img/zhedie.png" @click="_openZhedie" />
        </div>
      </div>
      <Map ref="mapDrawId" :isAddLine="true" />
      <a-spin :spinning="mapSpinning" v-if="mapSpinning" />
      <div class="queryBox">
        <a-range-picker
          style="margin-right:20px;"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          @change="onChange"
          v-model="checkDate"
          show-time
          allowClear
        />
        <a-button style="margin-right:20px;" type="primary" :loading="mapSpinning" @click="onQuery">查询</a-button>
        <a-button style="margin-right:20px;" type="primary" @click="onReset">重置</a-button>
      </div>
      <!-- <div class="tlBox">
        <p>图例说明</p>
        <div class="box">
          <div>
            <img src="./img/icon1.png" />
            <p class="p1">起点</p>
          </div>
          <div>
            <img src="./img/icon3.png" />
            <p class="p2">终点</p>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import * as api from '@/api/xlgc/structure.js'
import Map from '@/views/xlgc/modules/map'
import SearchTree from './components/SearchTree'
import moment from 'moment'
export default {
  components: {
    SearchTree,
    Map
  },
  data() {
    return {
      data: [],
      zhedieWidth: 0,
      zhedieMinWidth: '350px',
      zhedieShow: true,
      openShow: false,
      pageFilter: {
        beginDate: '',
        endDate: '',
        userIds: []
      },
      date: '',
      time: '',
      mapSpinning: false,
      checkDate: [],
      phoneArr: [],
      treeData: [],
      departmentId: ''
    }
  },
  created() {
    this.setDate()
    this.getArea()
  },

  methods: {
    setDate() {
      this.timer = setInterval(() => {
        this.date = moment().format('YYYY-MM-DD')
        this.time = moment().format('HH:mm:ss')
      }, 999)
    },
    onChange(date, dateString) {
      if (dateString.length > 0) {
        this.pageFilter.beginDate = dateString[0]
        this.pageFilter.endDate = dateString[1]
      }
    },
    // 人员列表区域
    async getArea() {
      let res = await api.userTree()
      if (res.code == 200 && res.result !== null && res.result.length > 0) {
        this.treeData = res.result
        // 第一次传根部departmentId
        this.departmentId = res.result[0].key
      } else {
        this.$message.warning('行政区域无数据')
      }
    },
    onSelected(keys, titles, node) {
      if (keys.length > 0) {
        // 根据id，判断是否已经勾选
        let id = node.value
        let len = this.pageFilter.userIds.length
        if (len > 0) {
          this.pageFilter.userIds.forEach(item => {
            if (id == item) {
              this.$refs.mapDrawId.onSelect(id) // 传id，然后根据手机号码查询人员的经纬度
            }
          })
        }
      }
    },
    // 勾选人员
    onChecked(checkedInfo) {
      // debugger;
      this.pageFilter.userIds = []
      let checkedNodes = checkedInfo.checkedNodes
      if (checkedNodes.length > 0) {
        checkedNodes.forEach(item => {
          this.pageFilter.userIds.push(item.data.props.dataRef.key)
        })
      }
    },
    // 查询轨迹
    onQuery() {
      if (this.pageFilter.userIds.length <= 0) {
        this.$message.warning('请勾选左边行政区域人员')
        return
      }
      if (this.pageFilter.userIds.length > 5) {
        this.$message.warning('查询人数不能超过5人')
        return
      }
      if (this.checkDate.length === 0 || this.checkDate === '' || this.checkDate === undefined) {
        this.$message.warning('请选择查询日期')
        return
      }
      this.$refs.mapDrawId.clearOverlays()
      this.mapSpinning = true
      api
        .userMap(this.pageFilter)
        .then(res => {
          this.mapSpinning = false
          if (res && res.code == 200) {
            // console.log(res.result)
            let idArr = []
            let arr = []
            // let data = res.result
            let data = {
              '5159cde220114246b045e574adceafe9': [
                {
                  id: 5,
                  longitude: '110.24088',
                  latitude: '20.033595',
                  createTime: '2022-08-22 06:50:10',
                  createBy: 'admin',
                  sysUserId: '5159cde220114246b045e574adceafe9'
                },
                {
                  id: 6,
                  longitude: '110.25161',
                  latitude: '20.030592',
                  createTime: '2022-08-22 09:50:10',
                  createBy: 'admin',
                  sysUserId: '5159cde220114246b045e574adceafe9'
                },
                {
                  id: 7,
                  longitude: '110.25061',
                  latitude: '20.001817',
                  createTime: '2022-08-22 11:50:10',
                  createBy: 'admin',
                  sysUserId: '5159cde220114246b045e574adceafe9'
                }
              ],
              a7d7e77e06c84325a40932163adcdaa6: [
                {
                  id: 1,
                  longitude: '110.34088',
                  latitude: '20.035595',
                  createTime: '2022-08-22 06:50:10',
                  createBy: 'admin',
                  sysUserId: 'a7d7e77e06c84325a40932163adcdaa6'
                },
                {
                  id: 2,
                  longitude: '110.35066',
                  latitude: '20.039592',
                  createTime: '2022-08-22 09:50:10',
                  createBy: 'admin',
                  sysUserId: 'a7d7e77e06c84325a40932163adcdaa6'
                },
                {
                  id: 3,
                  longitude: '110.35061',
                  latitude: '20.007817',
                  createTime: '2022-08-22 11:50:10',
                  createBy: 'admin',
                  sysUserId: 'a7d7e77e06c84325a40932163adcdaa6'
                }
              ]
            }
            for (let k in data) {
              data[k].forEach((item, index) => {
                item.key = index
              })
              arr.push(data[k])
              idArr.push(k) // 有轨迹的id数组
            }
            this.$refs.mapDrawId.setMapData(arr)
            this.$refs.searchTree.drawInfoLine(idArr) // 根据id比对来画树右边的线条
          }
        })
        .catch(e => {
          this.mapSpinning = false
        })
    },
    onReset() {
      this.checkDate = []
      this.pageFilter.beginDate = ''
      this.pageFilter.endDate = ''
      this.$refs.mapDrawId.clearOverlays()
    },
    tableLocale({ text, column, record, index }) {
      console.log(text)
      console.log(column)
      console.log(record)
      console.log(index)
    },

    _closeZhedie() {
      this.zhedieWidth = '0px'
      this.zhedieMinWidth = '0px'
      this.zhedieShow = false
      this.openShow = true
    },
    _openZhedie() {
      this.zhedieWidth = '350px'
      this.zhedieMinWidth = '350px'
      this.zhedieShow = true
      this.openShow = false
    },
    onBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.sksj-layout {
  overflow-y: hidden;
  display: flex;
  flex-flow: column;
  height: 100%;
  background-image: url(./img/bg.png);
  // -webkit-background-size: cover;
  background-size: 100%;
  // min-width: 1200px;
  // min-height: 600px;
  position: relative;

  .title {
    // height: 5.555vh;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px!important;
    .back {
      height: 3.7vh;
      width: 4.44vh;
      background-color: rgba(230, 230, 230, 0.2);
      margin-left: 1.851vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      cursor: pointer;

      img {
        width: 2.222vh;
        height: 1.851vh;
      }
    }

    .title-content {
      flex: 1;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2.962vh;

      span {
        font-family: 'microsoft yahei';
        font-weight: bold;
      }

      em {
        height: 3.425vh;
        width: 1px;
        background-color: #a0a0a0;
        margin: 0 1.85vh;
      }

      i {
        font-size: 2.777vh;
        font-style: inherit;
        padding-top: 5px;

        i {
          color: #00ecff;
        }
      }

      img {
        width: 3.333vh;
        height: 3.333vh;
        margin-right: 1.85vh;
      }
    }
  }
  .content {
    flex: 1;
    padding: 1vh 1.388vh 1.388vh 1.388vh;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    position: relative;
    .tlBox {
      position: absolute;
      left: 370px;
      bottom: 3vh;
      background-color: #fff;
      padding: 10px 10px 0;
      > p {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .box {
        img {
          display: inline-block;
          width: 15px;
        }
        p {
          display: inline-block;
          margin-left: 20px;
          margin-bottom: 5px;
        }
        .p1 {
          color: #009b4d;
        }
        .p2 {
          color: #ff6501;
        }
      }
    }
    .queryBox {
      position: absolute;
      right: 0;
      top: 4vh;
    }
    .right {
      max-width: 530px;
    }

    .left,
    .right {
      // width: 49.074vh;
      transition: all 0.8s;
      min-width: 530px;
      height: calc(100% - 1vh - 1.388vh);
      z-index: 99;
      position: absolute;
      top: 1vh;
      left: 1.388vh;
      background-color: rgba(0, 0, 0, 0.6);

      .title {
        width: 100%;
        height: 3.703vh;
        border-bottom: 1px solid rgba(255, 255, 255, 0.6);
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        align-items: center;

        .control {
          // display: flex;
          // flex: 1;
          // justify-content: space-between;
          // align-items: center;

          img {
            margin: 0 1.851vh;
            cursor: pointer;

            &:first-child {
              width: 0.833vh;
              height: 1.388vh;
            }

            &:last-child {
              width: 2.222vh;
              height: 2.037vh;
            }
          }
        }

        .title-name {
          width: fit-content;
          height: 100%;
          color: #fff;
          font-size: 2.037vh;
          font-weight: bold;
          padding: 0 2.777vh;
          display: flex;
          align-items: center;
          cursor: pointer;
          &.cur {
            background-color: #0e6de9;
          }
        }
      }
      .left-content .ant-spin-spinning {
        position: absolute;
        left: 40%;
      }
    }
    /deep/ .ant-tree {
      overflow-y: scroll;
      // height: 80vh;
      height: 78vh;
      padding-bottom: 60px;
    }
    .open-left {
      width: 4.074vh;
      background-color: rgba(0, 0, 0, 0.6);
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 0.926vh;

      img {
        cursor: pointer;
        transform: rotate(180deg);
        width: 2.222vh;
        height: 2.037vh;
      }
    }
    /deep/ .ant-spin-spinning {
      position: fixed;
      top: 50%;
      left: 160px;
    }
  }
}
</style>
<style lang="less">
.blankLayoutBox {
  height: 100%;
}
</style>
